{include file="header.htm" /}
<body class="bodystyle" style="overflow-y: scroll; cursor: default; -moz-user-select: inherit;">
<div id="toolTipLayer" style="position: absolute; z-index: 9999; display: none; visibility: visible; left: 95px; top: 573px;"></div>
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
    <form class="form-horizontal" id="post_form" action="{:weapp_url('Monkcityser/Monkcityser/add')}" method="post">
        <div class="ncap-form-default">
            <dl class="row">
                <dt class="tit">
                    <label for="title">服务点名称</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="title" value="" id="title" class="input-txt">
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="url">省份</label>
                </dt>
                <dd class="opt">
                    <select name="province" id="province">
                        <option value="0">请选择省份</option>
                    </select>
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="url">城市</label>
                </dt>
                <dd class="opt">
                    <select id="city" name="city">
                        <option value="0">请选择城市</option>
                    </select>
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="tel">联系电话</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="tel" placeholder="联系电话" id="tel" class="input-txt">
                    <span class="err"></span>
                    <p class="notic2">为空不显示</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="url">地址</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="address" placeholder="地址" id="url" class="input-txt">
                    <span class="err"></span>
                    <p class="notic"></p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="sort_order">高德地图坐标</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="lng" value="" id="lng" class="input-txt">
                    <input type="button" value="选择坐标" style="width: 80px;height: 28px;border: 1px solid #ddd;" onclick="openMapPicker()">
                    <span class="err"></span>
                    <p class="notic2">点击"选择坐标"按钮打开地图选择器-》复制高德地图坐标</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="sort_order">排序</label>
                </dt>
                <dd class="opt">
                    <input type="text" name="sort_order" value="100" id="sort_order" class="input-txt">
                    <span class="err"></span>
                    <p class="notic">越小越靠前</p>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label>状态</label>
                </dt>
                <dd class="opt">
                    <div class="onoff">
                        <label for="target1" class="cb-enable selected">是</label>
                        <label for="target0" class="cb-disable ">否</label>
                        <input id="target1" name="status" value="1" type="radio" checked="checked">
                        <input id="target0" name="status" value="0" type="radio">
                    </div>
                    <p class="notic"></p>
                </dd>
            </dl>
            <div class="bot mt20">
                <a href="JavaScript:void(0);" onclick="checkForm();" class="ncap-btn-big ncap-btn-green" id="submitBtn">确认提交</a>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript">           
    function openMapPicker() {
        layer.open({
            type: 2,
            title: '选择地图坐标',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '80%'],
            content: 'https://guihuayun.com/maps/getxy.php',
            success: function(layero, index){
                console.log(22222);
                var iframe = window['layui-layer-iframe' + index];
                // 监听消息
                window.addEventListener('message', function(event) {
                    if (event.data && event.data.type === 'coordinates') {
                        $('#lng').val(event.data.coordinates);
                        layer.close(index);
                    }
                });
            }
        });
    }
    var parentObj = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    // 判断输入框是否为空
    function checkForm(){
        if($('input[name=title]').val() == ''){
            showErrorMsg('服务店名称不能为空！');
            $('input[name=title]').focus();
            return false;
        }
        if($('input[name=province]').val() == ''){
            showErrorMsg('请选择省份');
            $('input[name=province]').focus();
            return false;
        }
        if($('input[name=city]').val() == ''){
            showErrorMsg('请选择城市');
            $('input[name=city]').focus();
            return false;
        }
        if($('input[name=district]').val() == ''){
            showErrorMsg('请选择区县');
            $('input[name=district]').focus();
            return false;
        }
        if($('input[name=address]').val() == ''){
            showErrorMsg('请输入地址');
            $('input[name=address]').focus();
            return false;
        }
        if($('input[name=lng]').val() == ''){
            showErrorMsg('请输入高德坐标');
            $('input[name=lng]').focus();
            return false;
        }
        layer_loading('正在处理');
        $.ajax({
            type : 'post',
            url : "{:weapp_url('Monkcityser/Monkcityser/add', ['_ajax'=>1])}",
            data : $('#post_form').serialize(),
            dataType : 'json',
            success : function(res){
                layer.closeAll();
                if(res.code == 1){
                    var _parent = parent;
                    _parent.layer.close(parentObj);
                    _parent.layer.msg(res.msg, {shade: layer_shade, time: 1000}, function(){
                        _parent.window.location.reload();
                    });
                }else{
                    showErrorMsg(res.msg);
                }
            },
            error: function(e){
                layer.closeAll();
                showErrorAlert(e.responseText);
            }
        });
    }    
    // 初始化省份数据
    function initProvinces() {
        $.ajax({
            url: '{:weapp_url("Monkcityser/getProvinces")}',
            type: 'get',
            success: function(res) {
                if (res.code === 1) {
                    let html = '';
                    res.data.forEach(function(item) {
                        html += `<option value="${item.id}">${item.name}</option>`;
                    });
                    $('#province').html('<option value="">请选择省份</option>' + html);
                }
            }
        });
    }

    // 获取城市数据
    function getCities(provinceId) {
        $.ajax({            
            url: '{:weapp_url("Monkcityser/getCities")}',
            type: 'get',
            data: {parent_id: provinceId},
            success: function(res) {
                if (res.code === 1) {
                    let html = '';
                    res.data.forEach(function(item) {
                        html += `<option value="${item.id}">${item.name}</option>`;
                    });
                    $('#city').html('<option value="">请选择城市</option>' + html);
                    $('#district').html('<option value="">请选择区县</option>');
                }
            }
        });
    }

    // 获取区县数据
    function getDistricts(cityId) {
        $.ajax({
            url: '{:weapp_url("Monkcityser/getDistricts")}',            
            type: 'get',
            data: {parent_id: cityId},
            success: function(res) {
                if (res.code === 1) {
                    let html = '';
                    res.data.forEach(function(item) {
                        html += `<option value="${item.id}">${item.name}</option>`;
                    });
                    $('#district').html('<option value="">请选择区县</option>' + html);
                }
            }
        });
    }

    // 绑定事件
    $(function() {
        // 初始化省份
        initProvinces();
        
        // 省份改变时获取城市
        $('#province').change(function() {
            let provinceId = $(this).val();
            if (provinceId) {
                getCities(provinceId);
            } else {
                $('#city').html('<option value="">请选择城市</option>');
                $('#district').html('<option value="">请选择区县</option>');
            }
        });
        
        // 城市改变时获取区县
        $('#city').change(function() {
            let cityId = $(this).val();
            if (cityId) {
                getDistricts(cityId);
            } else {
                $('#district').html('<option value="">请选择区县</option>');
            }
        });
    });
</script>
{include file="footer.htm" /}